<template>
  <div>
    <a-form :form="form">

      <a-col :xl="{span: 20}" :lg="{span:20}" :md="{span: 24}" v-show="false">
        <a-form-item label="categoryId" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-input v-decorator="['categoryId', {rules: [{required: true, message: '请输入categoryId！'}]}]" />
        </a-form-item>
      </a-col>

      <a-col :xl="{span: 20}" :lg="{span:20}" :md="{span: 24}">
        <a-form-item label="标题" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-input v-decorator="['title', {rules: [{required: false, min: 2, message: '请输入至少二个字符的规则！'}]}]" />
        </a-form-item>
      </a-col>

      <a-col :xl="{span: 20}" :lg="{span: 20}" :md="{span: 24}">
        <a-form-item label="关键字" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-input v-decorator="['keywords', {rules: [{required: false, min: 2, message: '请输入至少二个字符的规则！'}]}]" />
        </a-form-item>
      </a-col>

      <a-col :xl="{span: 20}" :lg="{span: 20}" :md="{span: 24}">
        <a-form-item label="描述" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-textarea v-decorator="['description', {rules: [{required: false, max: 500, message: '最大500字符！'}]}]"></a-textarea>
        </a-form-item>
      </a-col>

    </a-form>
  </div>

</template>

<script>
  import pick from 'lodash.pick'
  import { updateCategoryAttrSeo, getSeo } from '@/api/site/category'
  export default {
    data () {
      return {
        labelCol: {
          xs: {
            span: 24
          },
          sm: {
            span: 7
          }
        },
        wrapperCol: {
          xs: {
            span: 24
          },
          sm: {
            span: 13
          }
        },
        categoryId: null,
        form: this.$form.createForm(this)
      }
    },
    created () {},
    methods: {
      setCategoryId (categoryId) {
         this.categoryId = categoryId
         this.form.setFieldsValue({ categoryId: categoryId })
         this.getSeoInfo()
      },
      getSeoInfo () {
        getSeo({ categoryId: this.categoryId }).then(response => {
            this.form.setFieldsValue(pick(response.res, 'title', 'keywords', 'description'))
        })
      },
      handleSubmit () {
        const {
          form: {
            validateFields
          }
        } = this
        validateFields((errors, values) => {
          if (!errors) {
            this.confirmLoading = true
            updateCategoryAttrSeo(values).then(response => {
              this.$emit('ok', this.categoryId)
              this.$message.info('操作成功!')
            })
          } else {
            console.log(errors)
          }
          this.confirmLoading = false
        })
      },
      handleCancel () {
         this.form.resetFields()
      }
    }
  }
</script>
